<template>
  <div>
    <div id="centreLeft1Chart" style="width:11rem; height: 5rem;"></div>
  </div>
</template>

<script>
import echartMixins from "@/utils/resizeMixins";
import * as echarts from 'echarts';
// import data from "C:\\Users\\Administrator\\Desktop\\shared\\test.json"
//import data from "D:\\Documents\\Tencent Files\\2947753930\\FileRecv\\新建文件夹 (2)\\P4\\P4\\share\\test.json"


import data from "./test.json"
export default {
  data() {
    return {
      chart: null,
      jsonData:data
    };
  },
  mixins: [echartMixins],
  mounted() {
    this.draw();
  },
  methods: {
    draw() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = this.$echarts.init(document.getElementById("centreLeft1Chart"));
      //  ----------------------------------------------------------------

      let dataList = [{
        name: 'h1-h2',
        value: this.jsonData[1]["bandwidth"]
      }, {
        name: 'h2-h1',
        value: this.jsonData[3]["bandwidth"]
      }, {
        name: 'h2-h3',
        value: this.jsonData[5]["bandwidth"]
      }, {
        name: 'h3-h2',
        value: this.jsonData[7]["bandwidth"]
      }, {
        name: 'h1-h3',
        value: this.jsonData[9]["bandwidth"]
      }, {
        name: 'h3-h1',
        value: this.jsonData[11]["bandwidth"]
      }];
      let dataList2 = [{
        name: 'h1-h2',
        value: this.jsonData[1]["transfer"]
      }, {
        name: 'h2-h1',
        value: this.jsonData[3]["transfer"]
      }, {
        name: 'h2-h3',
        value: this.jsonData[5]["transfer"]
      }, {
        name: 'h3-h2',
        value: this.jsonData[7]["transfer"]
      }, {
        name: 'h1-h3',
        value: this.jsonData[9]["transfer"]
      }, {
        name: 'h3-h1',
        value: this.jsonData[11]["transfer"]
      }];
      var img = [
        'image://',
        'image://',
        'image://',
        'image://',
      ];
      var datacoords = [{
        coords: [
          ['h1-h2', this.jsonData[1]["bandwidth"]],
          ['h2-h1', this.jsonData[3]["bandwidth"]],
          ['h2-h3', this.jsonData[5]["bandwidth"]],
          ['h3-h2', this.jsonData[7]["bandwidth"]],
          ['h1-h3', this.jsonData[9]["bandwidth"]],
          ['h3-h1', this.jsonData[11]["bandwidth"]],
        ]
      }]
      this.chart.setOption({
        backgroundColor: null,
        grid: {
          left: "10%", //距离左边的距离
          right: "13%", //距离右边的距离
          bottom: "10%", //距离下边的距离
          top: "10%" //距离上边的距离
        },
        title: {
          text: '',
          left: 26,
          top: 26,
          textStyle: {
            color: '#7184C6',
            fontSize: 15,
            fontWeight: 50000,
            fontFamily: 'PingFang SC'
          }
        },

        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            crossStyle: {
              color: "#999"
            }
          },
          formatter: function (params) {
            // 使用 params 中的数据构建提示信息
            var param1 = params[0]; // 假设我们只关心第一个数据点
            var seriesName1 = param1.seriesName; // 系列名称
            var value1 = param1.value; // 数据值
            var param2 = params[1]; // 假设我们只关心第一个数据点
            var seriesName2 = param2.seriesName; // 系列名称
            var value2 = param2.value; // 数据值
            var tooltipStr ="got a packet<br>###[ Ethernet ]### <br>  dst       = 08:00:00:00:02:02<br>  src       = 08:00:00:00:02:00<br>  type      = IPv4<br>###[ IP ]### <br>     version   = 4<br>     ihl       = 10<br>     tos       = 0x0<br>     len       = 58<br>     id        = 1<br>     flags     = <br>     frag      = 0<br>     ttl       = 62<br>     proto     = udp<br>     chksum    = 0x60b0<br>     src       = 10.0.1.1<br>     dst       = 10.0.2.2<br>     \\options   \\<br>      |###[ MRI ]### <br>      |  copy_flag = 0<br>      |  optclass  = control<br>      |  option    = 31<br>      |  length    = 20<br>      |  count     = 2<br>      |  \\swtraces  \\<br>      |   |###[ SwitchTrace ]### <br>      |   |  swid      = 1<br>      |   |  qdepth    = 0<br>      |   |###[ SwitchTrace ]### <br>      |   |  swid      = 1<br>      |   |  qdepth    = 0<br>###[ UDP ]### <br>        sport     = 1234<br>       dport     = 4321<br>        len       = 18<br>        chksum    = 0xfc7a<br>###[ Raw ]### <br>           load      = 'p4 is cool'" + <br/> + seriesName1 + ':' + value1 + '<br/>' + seriesName2 + value2;
            return tooltipStr;
          }
        },
        xAxis: [{
          type: "category",
          data: ['h1-h2', 'h2-h1', 'h2-h3', 'h3-h2', 'h1-h3', 'h3-h1'],
          axisLabel: {
            textStyle: {
              color: "#ffffff",
              fontSize: 16,
              fontFamily: "Microsoft YaHei"
            }
          },


          axisTick: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#7490D4',
            }
          },
        }],
        yAxis: [{
          name:"带宽(Mbit/s)",
          type: "value",
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: "#7184C6",
              fontSize: 15,
              fontFamily: "Microsoft YaHei"
            },
          },
          splitLine: {
            show: false
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#7490D4',
            }
          },
          axisTick: {
            show: false
          },
          min:940,
          max:950
        },
          {
            name:"吞吐量(MByte)",
            type: "value",
            axisLabel: {
              formatter: "{value}",
              textStyle: {
                color: "#7184C6",
                fontSize: 15,
                fontFamily: "Microsoft YaHei"
              }
            },
            splitLine: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#7490D4',
              }
            },
            axisTick: {
              show: false
            },
            min:220,
            max:227
          },


        ],

        series: [{
          name: "带宽",
          type: "bar",
          data: dataList,
          barGap: '-100%',
          barCategoryGap: '60%',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#49c06b'
              },
                {
                  offset: 1,
                  color: '#12c2ee'
                }
              ])
            },
            emphasis: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#3eb5dd'
              },
                {
                  offset: 1,
                  color: '#499ef4'
                }
              ])
            }
          },
        },
          {
            name: "吞吐量",
            type: "line",
            symbolSize: 130,
            symbol: img[3],
            yAxisIndex: 1,
            data: dataList2,
            itemStyle: {
              normal: {
                color: "#76f778"
              }
            }
          },
          {
            name: '滑行的光点',
            type: 'lines',
            yAxisIndex:1,
            coordinateSystem: 'cartesian2d',
            color:"#e50303",
            symbolSize: 30,
            polyline: true,
            effect: {
              show: true,
              trailLength: 0,
              symbol: "diamond",
              period: 10, //光点滑动速度
              symbolSize: 15,
              // symbol: img[1]
            },
            lineStyle: {
              normal: {
                width: 1,
                opacity: 0.6,
                curveness: 0.2
              }
            },
            data: datacoords
          }
        ]
      })


    }
  },
  destroyed() {
    window.onresize = null;
  }
};
</script>

<style lang="scss" scoped>
</style>